<template>
  <div class="login-box">
    <van-icon name="close" class="login-close" @click="onClickClose" />
    <van-row class="title">
      <van-col offset="8" span="8">群多多</van-col>
    </van-row>
    <van-row
      class="input-group">
      <van-col offset="4" span="16">
        <van-cell-group >
          <van-field
            v-model="form.phoneNum"
            type="number"
            label="手机号"
            icon="clear"
            placeholder="请输入手机号"
            required
            @click-icon=" form.phoneNum = ''; "
            :error-message="phoneNumInputErr"
          />
          <van-field
            v-model.trim="form.password"
            type="password"
            label="密码"
            placeholder="请输入密码"
            required
          />
        </van-cell-group>
      </van-col>
    </van-row>

    <van-row class="login-group-btn" gutter="18">
      <van-col offset="8" span="8">
        <van-button
          class="login-btn"
          type="primary"
          @click="isLogin ? login() : ''"
          >
          登录
        </van-button>
      </van-col>
      <van-col span="8">
        <p class="login-forget-password" @click="forgetPassword">忘记密码</p>
      </van-col>
    </van-row>

    <van-row class="register-btn" gutter="18">
      <van-col offset="8" span="8">
        <p @click="register">注册</p>
      </van-col>
    </van-row>

    <van-row class="wechat-login" gutter="18">
      <van-col offset="8" span="8">
        <div class="wechat-container" @click="wechatLogin">
          <van-icon name="chat" class="wechat-login-icon" />
          <p>微信登录</p>
        </div>
      </van-col>
    </van-row>
	</div>
</template>

<script>
	import { Field, Button, Row, Col, Cell, CellGroup, Icon } from 'vant';
  import md5 from 'js-md5';
	export default {
		components: {
      [Field.name]: Field,
      [Button.name]: Button,
			[Row.name]: Row,
      [Col.name]: Col,
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [Icon.name]: Icon,
		},
		data() {
			return {
        isShow: true,
        isLogin: true,
        phoneNumInputErr: '',
        form: {
          phoneNum: '11111111116',
          password: '111'
        },
			}
		},
    mounted() {
    },
    methods: {
      login() {
        // TODO: 跳转
        // this.$router.push('/user-info');

        for(let key in this.form) {
          if(this.form[key] === '') {
            this.$dialog.alert({
              message: '请填写完整'
            });
            this.isLogin = true;
            return false;
          }
        }
        this.isLogin = false;
        // 将密码转成MD5格式
        let passwordMD5 = this.CalcMD5(this.form.password);
        console.log(passwordMD5)
        // 登录逻辑
        let params = new URLSearchParams();
        params.append('phoneNum', this.form.phoneNum);
        params.append('password', passwordMD5);
        this.$axios({
          method: "POST",
          data: params,
          url: url_g + '/userLogin/login'
        }).then((res) => {
          console.log(res);
          let data = res.data;
          if(data.success) {
            let userToken = data.data[this.form.phoneNum];
            let userInfo = data.data[userToken];
            // 将用户信息存储到cookie中
            this.$cookies.set("phoneNum", this.form.phoneNum);
            this.$cookies.set("password", passwordMD5);
            if(userInfo.sex) {
              // 用户填写画像页面 跳转到首页
              this.$router.push({
                name: 'Home',
                params: {
                  token: userToken,
                  info: userInfo
                }
              });
            } else {
              // 用户没有填写画像页面 跳转到用户画像页面
              this.$router.push({
                name: 'UserInfo',
                params: {
                  token: userToken,
                  info: userInfo
                }
              });
            }
          } else {
            this.$dialog.alert({
              message: data.message
            });
          }
        }).catch((e)=>{
          this.isLogin = true;
          this.$dialog.alert({
            message: '您输入的信息有误或网络有问题，请检查重试！'
          });
        });
      },
      forgetPassword() {
        // 忘记密码
        this.$router.push('/forget-password');
      },
      register() {
        // 注册逻辑
        this.$router.push('/register');
      },
      wechatLogin() {
        // 微信登录逻辑
        alert("微信登录逻辑");
      },
      onClickClose() {
        // 点击关闭按钮 跳转到APP首页
        this.$router.push('/index');
      },
      CalcMD5(pwd) {
        pwd = pwd.toUpperCase();
        pwd = md5(pwd);
        return pwd;
      }
    }
	}
</script>

<style scoped="scoped">
p {
  margin: 0;
}
.login-box {
  position: relative;
  width: 100%;
  text-align: center;
  color: #101010;
  overflow-x: hidden;
}
.van-row {
  margin-left: 0!important;
  margin-right: 0!important;
}
.login-close {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 26px;
  z-index: 9;
}
.title {
  line-height: 41px;
  font-size: 28px;
  text-align: center;
  margin-top: 116px;
}
.input-group {
  margin-top: 100px;
}
.login-group-btn {
  height: 30px;
  margin-top: 20px;
}
.login-group-btn .van-col {
  height: 30px;
}
.login-btn {
  width: 80px;
  height: 30px;
  font-size: 14px;
  line-height: 30px;
}
.login-forget-password {
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  margin: 0;
  text-align: left;
  cursor: pointer;
}
.register-btn {
  height: 30px;
  font-size: 14px;
  margin-top: 20px;
}
.wechat-login {
  margin-top: 100px;
  font-size: 14px;
}
.wechat-login-icon {
  width: 30px;
  font-size: 24px;
}
</style>